import React from "react";
import style from './inbox.module.css';
import axios from "axios";
import Swiper from 'swiper/js/swiper.js';
import 'swiper/css/swiper.min.css'
import MessageStyles from "./message.module.css";
import a from "../../statics/r2.png";
import b from "../../statics/r3.png";
// import { Popover, Button } from 'antd';

const content = (
  <div>
    <p>Content</p>
  </div>
);


class InBox extends React.Component {
  constructor() {
    super();
    this.state = {
      classContent: {},
    };
  }//初始化数据，后台赋值
  async componentDidMount() {
    this.setState({
      classContent: (await axios.get(`/api/classContent`)).data[0],
    });

    new Swiper('.swiper-container', {
      loop: true,
      width: 1200,
      height: 360,
      // 如果需要分页器
      pagination: {
        el: '.swiper-pagination',
      },

      // 如果需要前进后退按钮
      navigation: {
        nextEl: '.swiper-button-next',
        prevEl: '.swiper-button-prev',
      },

      // 如果需要滚动条
      scrollbar: {
        el: '.swiper-scrollbar',
      },

      observer: true,//修改swiper自己或子元素时，自动初始化swiper
      observeParents: true,//修改swiper的父元素时，自动初始化swiper
    })
  }

  render() {
    return (
      <div className={style.all}>
        <div id="archor" />
        <div className={style.head}>
          <img src={this.state.classContent.banner}/>
        </div>
        <div className={style.headtitle}>
          我们的教具<br/>
          OUR TEACHING AIDS
        </div>
        <div className={MessageStyles.right_nav}>
          <ul className={MessageStyles.ule}>
            <li className={MessageStyles.auditionb} ><a href='http://zhuyp.ccimm.top/query'><img src={a}/></a> </li>
            <li className={MessageStyles.auditionc} ><a href='http://zhuyp.ccimm.top/inbox'><img src={b}/></a></li>
            <li className={MessageStyles.auditiond}><a href="#archor" className={MessageStyles.archor}></a></li>
          </ul>
        </div>
        <div className={style.aids}>
          <div className="swiper-container">
            <div className="swiper-wrapper">
              {
                (this.state.classContent.swiperImg || []).map(item => (
                  <div className="swiper-slide">
                    <div className={style.swiperItem}><img src={item} width={1200} alt=""/></div>
                  </div>
                ))
              }
            </div>
            <div className="swiper-pagination" />
            <div className="swiper-button-prev" />
            <div className="swiper-button-next" />
          </div>
        </div>
        <div className={style.footall}>
          <div className={style.footcontent}>
          <div className={style.foottitle}>育乐教室</div>
          <div className={style.foottitle}>Recreational</div>
          {
            (this.state.classContent.musicClass || []).map(item => (
              <div className={style.footimg}>
                <img src={item.img}/>
                <div className={style.footTitle}>{item.title}</div>
              </div>
            ))
          }
        </div>
          <div className={style.footcontent}>
            <div className={style.foottitle}>其他教室</div>
            <div className={style.foottitle}>Other</div>
            {
              (this.state.classContent.region || []).map(item => (
                <div className={style.footimg}>
                  <img src={item.img}/>
                  <div className={style.footTitle}>{item.title}</div>
                </div>
              ))
            }
          </div>
          <div className={style.footcontent}>
            <div className={style.foottitle}>公共区域</div>
            <div className={style.foottitle}>Public</div>
            {
              (this.state.classContent.other || []).map(item => (
                <div className={style.footimg}>
                  <img src={item.img}/>
                  <div className={style.footTitle}>{item.title}</div>
                </div>
              ))
            }
          </div>
        </div>
      </div>
    );
  }
}


export default InBox;
